<template>
	<view>


		<!-- 产品名称 -->
		<u-action-sheet :actions="product_list" @select="selectClick1" cancelText="取消" @close="closeAction(1)"
			:closeOnClickOverlay="true" :show="product_show"></u-action-sheet>

		<!-- 订单状态 -->
		<u-action-sheet :actions="orderStatus_list" @select="selectClick2" cancelText="取消" @close="closeAction(2)"
			:closeOnClickOverlay="true" :show="orderStatus_show"></u-action-sheet>


		<!-- 发票状态 -->
		<u-action-sheet :actions="fapiao_list" @select="selectClick3" cancelText="取消" @close="closeAction(3)"
			:closeOnClickOverlay="true" :show="fapiao_show"></u-action-sheet>

		<!-- 收款状态 -->
		<u-action-sheet :actions="shoukuan_list" @select="selectClick4" cancelText="取消" @close="closeAction(4)"
			:closeOnClickOverlay="true" :show="shoukuan_show"></u-action-sheet>


		<u-popup :show="show" mode="top" @close="close">
			<view class="pop-search">
				<u--input placeholder="请输入订单编号" customStyle="background:#eee;" v-model="searchData.order_id"></u--input>
				<u--input placeholder="请输入公司名称" customStyle="background:#eee;margin-top:20rpx;"
					v-model="searchData.company"></u--input>
				<u--input placeholder="请输入公司税号" customStyle="background:#eee;margin-top:20rpx;"
					v-model="searchData.tax_id"></u--input>
				<!-- <u--input placeholder="请输入联系电话" customStyle="background:#eee;margin-top:20rpx;" v-model="searchData.order_id"></u--input>
				<u--input placeholder="请输入发行人员" customStyle="background:#eee;margin-top:20rpx;" v-model="searchData.order_id"></u--input>
				<u--input placeholder="请输入联系人" customStyle="background:#eee;margin-top:20rpx;" v-model="searchData.order_id"></u--input>
				<u-button type="primary" icon="search" text="立即搜索" style="margin-top:20rpx;" v-model="searchData.order_id"></u-button> -->
			</view>
		</u-popup>


		<view class="filter-main">
			<view style="display: flex;justify-content: space-between;">
				<view class="forms-main">
					<u--input placeholder="请输入订单编号" customStyle="background:#fff"
						v-model="searchData.order_id"></u--input>
				</view>
				<view class="forms-main">
					<u--input placeholder="请输入公司名称" customStyle="background:#fff"
						v-model="searchData.company"></u--input>
				</view>
			</view>
			<view style="display: flex;justify-content: space-between;">
				<view class="forms-main">
					<u--input placeholder="请输入公司税号" customStyle="background:#fff"
						v-model="searchData.tax_id"></u--input>
				</view>
				<view class="forms-main">
					<u--input placeholder="请输入联系电话" customStyle="background:#fff"
						v-model="searchData.product_id"></u--input>
				</view>
			</view>
			<view style="display: flex;justify-content: space-between;">
				<view class="forms-main" style="margin-bottom:0">
					<u-button type="primary" :plain="true" text="更多搜索项目" @click="show=true"></u-button>
				</view>
				<view class="forms-main" style="margin-bottom:0">
					<u-button type="primary" icon="search" text="立即搜索" @click="search"></u-button>
				</view>
			</view>
		</view>
		<view class="filter">
			<view class="filter-item">
				<view class="name">产品名称</view>
				<view class="val" @click="product_show=true">{{arrow_text.product}} <i
						class="iconfont icon-xiajiantou"></i></view>
			</view>
			<view class="filter-item">
				<view class="name">订单状态</view>
				<view class="val" @click="orderStatus_show=true">{{arrow_text.order}} <i
						class="iconfont icon-xiajiantou"></i></view>
			</view>
			<view class="filter-item">
				<view class="name">发票状态</view>
				<view class="val" @click="fapiao_show=true">{{arrow_text.fapiao}} <i
						class="iconfont icon-xiajiantou"></i></view>
			</view>
			<view class="filter-item">
				<view class="name">收款状态</view>
				<view class="val" @click="shoukuan_show=true">{{arrow_text.shoukuan}} <i
						class="iconfont icon-xiajiantou"></i></view>
			</view>
		</view>
		<view class="content">

			<view class="order-list-main">

				<view class="order-list-item" v-for="(item,idx) in list" @click="goView(item.id)">
					<view class="header">
						<view class="code"><span>订单编号 :</span>{{item.id}}</view>
						<view class="iconfont icon-xiangyoujiantou"></view>

					</view>
					<!-- <view class="order-detail">
					<view class="status">● 已收款</view>
					<view class="status">● 已开发票</view>
				</view> -->

					<view class="amount">

						{{item.amount}}
					</view>
					
					<view class="num">单价：{{item.price}} <span> x {{item.num}} </span></view>
					<view class="xd" v-if="item.invoice_status==1 || item.payment_status==1"  @click.stop="xdOder(item.id)">
						<u-button type="primary" :plain="true">续订</u-button>
					</view>
					<view class="order-detail">
						<view class="lable-item">
							<view class="lable-name">订单时间：</view>
							<view class="lable-val">{{item.addtime}}</view>
						</view>
					</view>
					<view class="order-detail">
						<view class="lable-item">
							<view class="lable-name">收款状态：</view>
							<view :class="['lable-val',item.payment_status!=1?'blue':'']">
								{{item.payment_status==1?'已收款':'等待收款'}}
							</view>
						</view>
					</view>
					<view class="order-detail">
						<view class="lable-item">
							<view class="lable-name">发票状态：</view>
							<view class="lable-val">{{item.invoice_status?"已开发票":'未开发票'}}</view>
						</view>
					</view>
					<view class="order-detail">
						<view class="lable-item">
							<view class="lable-name">订单状态：</view>
							<view class="lable-val">{{item.status==1?'正常服务':'其他'}}</view>
						</view>
					</view>
					<view class="order-detail">
						<view class="lable-item">
							<view class="lable-name">产品名称：</view>
							<view class="lable-val" style="color:#3c9cff;font-weight:bold">{{item.product_name}} <span>x
									{{item.num}}份</span></view>
						</view>
					</view>
					<view class="order-detail">
						<view class="lable-item">
							<view class="lable-name">公司名称：</view>
							<view class="lable-val">{{item.company}}</view>
						</view>
					</view>

					<view class="order-detail">
						<view class="lable-item">
							<view class="lable-name">公司税号：</view>
							<view class="lable-val">{{item.tax_id}}</view>
						</view>
					</view>




					<view class="order-detail" style="display: flex;justify-content: space-between;">
						<view class="lable-item">
							<view class="lable-name">发 行 人 ：</view>
							<view class="lable-val">{{item.u_username}}</view>
						</view>
						<view class="lable-item">
							<view class="lable-name">联 系 人 ：</view>
							<view class="lable-val">{{item.contact}}</view>
						</view>
					</view>

				</view>


			</view>
		</view>
		<view class="add" @click="addOrder">添加订单</view>
		<u-loadmore loadmoreText="加载中..." :status="statusloading" style="padding-bottom:60rpx;margin-top:0"
			nomoreText="没有了" />
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import {
		getOrderList
	} from 'config/api.js';
	export default {
		data() {
			return {
				arrow_text: {
					order: '全部',
					product: '全部',
					fapiao: '全部',
					shoukuan: '全部'
				},
				list: [],
				product_show: false,
				orderStatus_show: false,
				fapiao_show: false,
				shoukuan_show: false,
				show: false,
				statusloading: 'loading',
				current_page: 1,
				product_list: [{
						name: '全部',
						value: 0
					},
					{
						name: '舆情专报',
						value: 1
					},
					{
						name: '麻辣新舆情',
						value: 2
					},
					{
						name: '舆情套餐',
						value: 3
					},
					{
						name: '舆情日报',
						value: 4
					}
				],
				orderStatus_list: [{
						name: '全部',
						value: '999'
					},
					{
						name: '异常禁用',
						value: '0'
					},
					{
						name: '正常服务',
						value: '1'
					},
					{
						name: '服务到期',
						value: '2'
					}
				],
				fapiao_list: [{
						name: '全部',
						value: '999'
					},
					{
						name: '未开发票',
						value: '0'
					},
					{
						name: '已开发票',
						value: '1'
					},
					{
						name: '发票冲红',
						value: '2'
					}
				],
				shoukuan_list: [{
						name: '全部',
						value: '999'
					},
					{
						name: '未收款',
						value: '0'
					},
					{
						name: '已收款',
						value: '1'
					},
					{
						name: '已退款',
						value: '2'
					}
				],

				searchData: {
					'order_id': '',
					'company': '',
					'tax_id': '',
					'product_id': '',
					'status': '',
					'invoice_status': '',
					'payment_status': ''
				}
			}
		},
		onReachBottom() {
			let pageData = {
				page: this.current_page + 1,
				...this.searchData
			}
			getOrderList(pageData).then(r => {
				if (this.current_page >= r.data.last_page) {
					// this.list = this.list.concat(r.data.data)
					this.statusloading = "nomore"
				} else {
					this.current_page = r.data.current_page
					this.list = this.list.concat(r.data.data)
				}

			})
		},
		computed: {
			...mapState(['hasLogin', 'userInfo']),
		},
		onLoad() {
			if (this.hasLogin === false) {
				uni.navigateTo({
					url: '/pages/user/login'
				})
			} else {
				getOrderList().then(r => {
					this.list = r.data.data
					this.current_page = r.data.current_page
				})
			}
		},
		methods: {
			addOrder() {
				uni.navigateTo({
					url: '/pages/index/addOrder'
				})
			},
			goView(id) {
				uni.navigateTo({
					url: '/pages/index/detail?id=' + id
				})
			},
			xdOder(id){
				uni.navigateTo({
					url: '/pages/index/addOrder?type=xd&id='+id
				})
			},
			closeAction(t) {
				switch (t) {
					case 1:
						this.product_show = false
						break;
					case 2:
						this.orderStatus_show = false
						break;
					case 3:
						this.fapiao_show = false
						break;
					case 4:
						this.shoukuan_show = false
						break;
				}

			},
			selectClick1(index) {
				// this.
				this.arrow_text.product = index.name
				this.$set(this.searchData, 'product_id', index.value)
				this.fetchData(this.searchData)
				this.product_show = false
			},
			selectClick2(index) {
				// this.
				this.arrow_text.order = index.name
				if (index.value < 10) {
					this.$set(this.searchData, 'status', index.value)
				} else {
					this.$set(this.searchData, 'status', '')
				}
				this.fetchData(this.searchData)
				this.product_show = false
			},
			selectClick3(index) {
				// this.
				this.arrow_text.fapiao = index.name
				if (index.value < 10) {
					this.$set(this.searchData, 'invoice_status', index.value)
				} else {
					this.$set(this.searchData, 'invoice_status', '')
				}
				this.fetchData(this.searchData)
				this.product_show = false
			},
			selectClick4(index) {
				// this.
				this.arrow_text.shoukuan = index.name
				if (index.value < 10) {
					this.$set(this.searchData, 'payment_status', index.value)
				} else {
					this.$set(this.searchData, 'payment_status', '')
				}
				this.fetchData(this.searchData)
				this.product_show = false
			},
			close() {
				this.show = false
			},
			fetchData(postData) {
				this.statusloading = "loading"
				getOrderList(postData).then(r => {
					if (r.data.total == 0) {
						this.statusloading = "nomore"
					} else if (r.data.total <= 20) {
						this.statusloading = "nomore"
					}
					this.list = r.data.data
				})
			},
			search() {
				this.statusloading = "loading"
				let postData = this.searchData;
				getOrderList(postData).then(r => {
					if (r.data.total == 0) {
						this.statusloading = "nomore"
					} else if (r.data.total <= 20) {
						this.statusloading = "nomore"
					}
					this.list = r.data.data
				})
			}
		}
	}
</script>

<style>
	.xd{
		width:100px;
		margin:0  auto 40rpx auto;
	}
	page {
		background-color: #f5f5f5;
	}

	.add {
		background-color: #3c9cff;
		position: fixed;
		bottom: 190rpx;
		text-align: center;
		color: #fff;
		font-size: 38rpx;
		border-radius: 40rpx;
		padding: 20rpx 50rpx;
		box-shadow: 0 0 10px #3c9cff;
		left: 50%;
		transform: translateX(-50%);
	}

	.filter {
		margin: 0 40rpx 0 40rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.filter-item {
			margin-top: 40rpx;
			font-size: 26rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 49%;

			.iconfont {
				color: #666;
				font-size: 20rpx;
				margin-left: 15rpx;
			}

			.name {
				color: #999;
				width: 100rpx;
			}

			.val {
				width: calc(100% - 160rpx);
				color: #666;
				border: 1px solid #ddd;
				text-align: center;
				background-color: #fff;
				padding: 10rpx 20rpx;

			}
		}
	}

	.pop-search {
		padding: 40rpx;
	}

	.filter-main {
		margin: 40rpx;
		margin-bottom: 0;

		.forms-main {
			width: 48%;
			margin-bottom: 20rpx;
		}
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.order-list-main {
		width: calc(100% - 60rpx);
		margin: 30rpx;

		.order-list-item {
			margin-bottom: 40rpx;
			background-color: #fff;
			border-radius: 20rpx;
			width: calc(100% - 40rpx);
			padding: 20rpx;

			.amount {
				text-align: center;
				font-size: 60rpx;
				margin: 60rpx 0 0 0;
				font-weight: bold;
				position: relative;


			}

			.num {
				font-size: 26rpx;
				color: #666;
				font-weight: normal;
				text-align: center;
				margin-bottom: 60rpx;

				span {
					margin: 0 10rpx 0 10rpx;
				}
			}

			.header {
				display: flex;
				justify-content: space-between;
				color: #999;
				border-bottom: 1px solid #eee;
				padding-bottom: 20rpx;
				font-size: 28rpx;

				.code {
					color: #000;

					span {
						color: #999;
						margin-right: 10rpx;
					}
				}

				.status {
					color: #3c9cff !important;
				}
			}

			.order-detail {
				margin-top: 20rpx;
				font-size: 28rpx;

				.lable-item {
					display: flex;
					flex-wrap: wrap;

					.lable-name {
						color: #999;
						width: 140rpx;
					}

					.lable-val {
						width: calc(100% - 140rpx);
						color: #000;

						&.blue {
							color: #3c9cff
						}

						span {
							color: #999;
							font-weight: normal;
							margin-left: 20rpx;
						}
					}
				}
			}
		}
	}
</style>